<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>继续教育-批次管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				继续教育-批次管理
				<el-button class="f-r" type="primary" icon="el-icon-plus" @click="addCont">添加批次</el-button>
			</div>
			<div class="pd10">
				<el-table :data="tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="etId" label="名称">
						<template slot-scope="scope">
							第{{scope.row.etId}}届考试
						</template>
					</el-table-column>
					<el-table-column label="报名时间">
						<template slot-scope="scope">
							{{scope.row.etSignStart}} — {{scope.row.etSignEnd}}
						</template>
					</el-table-column>
					<el-table-column label="考试时间">
						<template slot-scope="scope">
							{{scope.row.etExamStart}} — {{scope.row.etExamEnd}}
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="medium">查看</el-button>
							<el-button @click="handleEdit(scope.row)" type="text" size="medium">编辑</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium">删除</el-button>
						</template>
					</el-table-column>
				</el-table>				
				<!-- 分页 -->
				<div class="bottomstate">
					<el-button type="danger" @click="batchDelete">批量删除</el-button>
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>
			<!-- 报名时间 -->
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="120px">
					<el-form-item label="报名时间:" >
						<el-date-picker
						  v-model="form.etSignStart"
						  type="datetime"
						  placeholder="选择日期时间"
						  value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
						至
						<el-date-picker
						  v-model="form.etSignEnd"
						  type="datetime"
						  placeholder="选择日期时间"
						  value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="考试时间:" >
						<el-date-picker
						  v-model="form.etExamStart"
						  type="datetime"
						  placeholder="选择日期时间"
						  value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
						至
						<el-date-picker
						  v-model="form.etExamEnd"
						  type="datetime"
						  placeholder="选择日期时间"
						  value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="dialog-footer text-r">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					tableData: [],
					total:0,
					// 报名时间
					title:"",
					dialogFormVisible:false,
					form:{
						etId:"",
						etSignStart:"",
						etSignEnd:"",
						etExamStart:"",
						etExamEnd:"",
					},
					// 全选
					multipleSelection: []
				}
			},
			methods: {
				// 添加
				handleClick:function(row){
					window.location.href = 'education.html?etId='+row.etId;//此处拼接内容
				},
				addCont:function(){
					this.title="添加批次"
					this.form.etId=""
					this.form.etSignStart=""
					this.form.etSignEnd=""
					this.form.etExamStart=""
					this.form.etExamEnd=""
					this.dialogFormVisible = true					
				},
				handleEdit:function(row){
					this.title="修改批次"
					this.form.etId=row.etId
					this.form.etSignStart=row.etSignStart
					this.form.etSignEnd=row.etSignEnd
					this.form.etExamStart=row.etExamStart
					this.form.etExamEnd=row.etExamEnd
					this.dialogFormVisible = true
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.etSignStart == "") {
						this.$message.warning('报名开始时间不能为空');
						return flag = true;
					}
					if (this.form.etSignEnd == "") {
						this.$message.warning('报名结束时间不能为空');
						return flag = true;
					}
					if (this.form.etExamStart == "") {
						this.$message.warning('考试开始不能为空');
						return flag = true;
					}
					if (this.form.etExamEnd == "") {
						this.$message.warning('考试结束不能为空');
						return flag = true;
					}
				},
				onSubmit:function(){
					let that = this;
					if (that.IsNull()) {
						return;
					}
					let etSignStart = transdate(this.form.etSignStart)
					let etSignEnd = transdate(this.form.etSignEnd)
					let etExamStart = transdate(this.form.etExamStart)
					let etExamEnd = transdate(this.form.etExamEnd)
					let params={
						etId:that.form.etId,
						time1:etSignStart,
						time2:etSignEnd,
						time3:etExamStart,
						time4:etExamEnd,
					}
					console.log(params)
					addTime(params).then(res=>{
						if(res.data.code==0){
							this.$message.success('添加成功')
							this.dialogFormVisible = false
							this.getTabel()
						}
					})
				},
				getTabel:function(){
					timeList({
						page: this.page, //起始页面
						limit: this.limit, //每页显示个数
					}).then(res=>{
						if (res.data.code == 0) {
							this.tableData=res.data.data.list
							this.total=res.data.data.count
						}
					})
				},
				// 删除
				handleDelete:function(row){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						deleteTime({ids:row.etId}).then(res=>{
							console.log(res)
							if(res.data.code==0){								
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								that.getTabel();
							}
						})
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				},
				// 批量删除				
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				batchDelete() {
					let that = this
					let ids = []
					if (that.multipleSelection.length>0) {
						that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							for(let i=0;i<that.multipleSelection.length;i++){
								ids.push(that.multipleSelection[i].etId)
							}
							deleteTime({ids:ids.join(',')}).then(res=>{
								if(res.data.code==0){								
									that.$message({
										type: 'success',
										message: '删除成功!'
									});
									that.getTabel()
								}
							})
						}).catch(() => {
							that.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					} else {
						that.$message({
							type: 'warning',
							message: '请选择需要删除的数据'
						});
					}
				},
			},
			created() {
				this.getTabel()
			},
		});
	</script>
</html>
